f2e0165d5f
* Switch to withInstanceId higher order component * Add checkboxes to the rows in a TableCard, if a compareBy prop is set * Add Compare button to update query param * Populate the selected rows from the query parameter * Update compare filter display & selected table rows when the query changes * Skip displaying tags if the label is null/undefined * Style table header with compare button, search placeholder * Prevent setting just an ID list as the state, as this will wipe out already-fetched tag labels * Update docs * Shortcut out of fetching tag labels if the query is empty |
||
---|---|---|
.. | ||
animation-slider | ||
calendar | ||
card | ||
chart | ||
count | ||
dropdown-button | ||
ellipsis-menu | ||
empty-content | ||
filters | ||
flag | ||
gravatar | ||
higher-order/use-filters | ||
image-asset | ||
link | ||
order-status | ||
pagination | ||
product-image | ||
rating | ||
search | ||
segmented-selection | ||
split-button | ||
summary | ||
table | ||
tag | ||
README.md | ||
index.js |
README.md
Components
This folder contains the WooCommerce-created components. These are exported onto a global, wc.components
, for general use.
How to use:
For any files not imported into components/index.js
(analytics/*
, layout/*
, dashboard/*
, etc), we can use import { Card, etc … } from @woocommerce/components
.
For any component/*
files, we should import from component-specific paths, not from component/index.js
, to prevent circular dependencies. See components/card/index.js
for an example.
import { Card, Link } from '@woocommerce/components';
render: function() {
return (
<Card title="Card demo">
Card content with an <Link href="/">example link.</Link>
</Card>
);
}
For external development
External developers will need to enqueue the components library, wc-components
, and then can access them from the global.
const { Card, Link } = wc.components;
render: function() {
return (
<Card title="Card demo">
Card content with an <Link href="/">example link.</Link>
</Card>
);
}