From 32018506dc4d7c7c17aee2ff1fcf3b788bf5d8c7 Mon Sep 17 00:00:00 2001 From: Jeff Stieler Date: Thu, 13 Dec 2018 09:21:47 -0700 Subject: [PATCH] Generate TextControlWithAffixes documentation from the component itself. --- .../docs/components/_sidebar.md | 1 + .../docs/components/table.md | 7 +++ .../components/text-control-with-affixes.md | 57 ++++++++++--------- .../src/text-control-with-affixes/index.js | 42 +++++++++++++- 4 files changed, 80 insertions(+), 27 deletions(-) diff --git a/plugins/woocommerce-admin/docs/components/_sidebar.md b/plugins/woocommerce-admin/docs/components/_sidebar.md index e37928e624c..ff6f36b9cc5 100644 --- a/plugins/woocommerce-admin/docs/components/_sidebar.md +++ b/plugins/woocommerce-admin/docs/components/_sidebar.md @@ -27,4 +27,5 @@ * [Summary](components/summary.md) * [Table](components/table.md) * [Tag](components/tag.md) + * [TextControlWithAffixes](components/text-control-with-affixes.md) * [ViewMoreList](components/view-more-list.md) diff --git a/plugins/woocommerce-admin/docs/components/table.md b/plugins/woocommerce-admin/docs/components/table.md index 35f5281f429..16c53325afe 100644 --- a/plugins/woocommerce-admin/docs/components/table.md +++ b/plugins/woocommerce-admin/docs/components/table.md @@ -65,6 +65,13 @@ It will display `TablePlaceholder` component instead of `Table` if that's the ca A function which returns a callback function to update the query string for a given `param`. +### `onColumnsChange` + +- Type: Function +- Default: `noop` + +A function which returns a callback function which is called upon the user changing the visiblity of columns. + ### `downloadable` - Type: Boolean diff --git a/plugins/woocommerce-admin/docs/components/text-control-with-affixes.md b/plugins/woocommerce-admin/docs/components/text-control-with-affixes.md index 8bcb64bc60d..06a8688093c 100644 --- a/plugins/woocommerce-admin/docs/components/text-control-with-affixes.md +++ b/plugins/woocommerce-admin/docs/components/text-control-with-affixes.md @@ -1,64 +1,69 @@ -Text Control With Affixes -============================ - -This component is essentially a wrapper (really a reimplementation) around the TextControl component that adds support for affixes, i.e. the ability to display a fixed part either at the beginning or at the end of the text input. - +`TextControlWithAffixes` (component) +==================================== +This component is essentially a wrapper (really a reimplementation) around the +TextControl component that adds support for affixes, i.e. the ability to display +a fixed part either at the beginning or at the end of the text input. Props ----- -The set of props accepted by the component will be specified below. -Props not included in this set will be applied to the input element. - ### `label` +- Type: String +- Default: null + If this property is added, a label will be generated using label property as the content. -- Type: `String` - ### `help` +- Type: String +- Default: null + If this property is added, a help text will be generated using help property as the content. -- Type: `String` - ### `type` +- Type: String +- Default: `'text'` + Type of the input element to render. Defaults to "text". -- Type: `String` -- Default: "text" - ### `value` +- **Required** +- Type: String +- Default: null + The current value of the input. -- **Required** -- Type: `String` - ### `className` +- Type: String +- Default: null + The class that will be added with "components-base-control" to the classes of the wrapper div. If no className is passed only components-base-control is used. -- Type: `String` - ### `onChange` +- **Required** +- Type: Function +- Default: null + A function that receives the value of the input. -- **Required** -- Type: `function` - ### `prefix` +- Type: ReactNode +- Default: null + Markup to be inserted at the beginning of the input. -- Type: ReactNode - ### `suffix` +- Type: ReactNode +- Default: null + Markup to be appended at the end of the input. -- Type: ReactNode diff --git a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js index 55a5b484954..4e372fb8786 100644 --- a/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js +++ b/plugins/woocommerce-admin/packages/components/src/text-control-with-affixes/index.js @@ -7,6 +7,11 @@ import PropTypes from 'prop-types'; import { BaseControl } from '@wordpress/components'; import { withInstanceId } from '@wordpress/compose'; +/** + * This component is essentially a wrapper (really a reimplementation) around the + * TextControl component that adds support for affixes, i.e. the ability to display + * a fixed part either at the beginning or at the end of the text input. + */ class TextControlWithAffixes extends Component { render() { const { @@ -18,7 +23,7 @@ class TextControlWithAffixes extends Component { onChange, prefix, suffix, - type = 'text', + type, ...props } = this.props; @@ -46,8 +51,43 @@ class TextControlWithAffixes extends Component { } } +TextControlWithAffixes.defaultProps = { + type: 'text', +}; + TextControlWithAffixes.propTypes = { + /** + * If this property is added, a label will be generated using label property as the content. + */ + label: PropTypes.string, + /** + * If this property is added, a help text will be generated using help property as the content. + */ + help: PropTypes.string, + /** + * Type of the input element to render. Defaults to "text". + */ + type: PropTypes.string, + /** + * The current value of the input. + */ + value: PropTypes.string.isRequired, + /** + * The class that will be added with "components-base-control" to the classes of the wrapper div. + * If no className is passed only components-base-control is used. + */ + className: PropTypes.string, + /** + * A function that receives the value of the input. + */ + onChange: PropTypes.func.isRequired, + /** + * Markup to be inserted at the beginning of the input. + */ prefix: PropTypes.node, + /** + * Markup to be appended at the end of the input. + */ suffix: PropTypes.node, };