[RadioSelectList] 實作 RadioSelectList, RadioSelectOption

packages/core/src/index.js

@@ -27,6 +27,7 @@ import IconCheckbox from './IconCheckbox';
 import Switch from './Switch';
 import TextInput from './TextInput';
 import SearchInput from './SearchInput';
+import Radio from './Radio';
 
 // Containers
 import InfiniteScroll from './InfiniteScroll';
@@ -68,6 +69,7 @@ export {
   Switch,
   TextInput,
   SearchInput,
+  Radio,
 
   InfiniteScroll,
   HeaderRow,

packages/form/src/RadioSelectList.js

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import { valueType } from './RadioSelectOption';
+import SelectList from './SelectList';
+
+export default function RadioSelectList({
+  value,
+  defaultValue,
+  onChange,
+  title,
+  desc,
+  ...otherProps
+}) {
+  return (
+    <SelectList
+      value={value}
+      defaultValue={defaultValue}
+      onChange={onChange}
+      title={title}
+      desc={desc}
+      {...otherProps}
+      // default props for RadioSelectList
+      multiple={false}
+      showCheckAll={false}
+      checkAllLabel={null}
+      minCheck={undefined}
+    />
+  );
+}
+
+RadioSelectList.propTypes = {
+  value: valueType,
+  defaultValue: valueType,
+  onChange: PropTypes.func,
+  title: PropTypes.string,
+  desc: PropTypes.node,
+};
+
+RadioSelectList.defaultProps = {
+  value: undefined,
+  defaultValue: undefined,
+  onChange: () => {},
+  title: undefined,
+  desc: undefined,
+};

packages/form/src/RadioSelectOption.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import {
+  Radio,
+  ListRow,
+} from '@ichef/gypcrete';
+
+export const valueType = PropTypes.oneOfType([
+  PropTypes.string,
+  PropTypes.number,
+  PropTypes.bool,
+]);
+
+export const TYPE_SYMBOL = Symbol('RadioSelectOption');
+
+function RadioSelectOption({
+  label,
+  desc,
+  value,
+  avatar,
+  readOnly,
+  checked,
+  onChange,
+  ...checkboxProps
+}) {
+  const handleRadioChange = (event) => {
+    onChange(value, event.target.checked);
+  };
+
+  return (
+    <ListRow>
+      <Radio
+        checked={checked}
+        disabled={readOnly}
+        basic={label}
+        aside={desc}
+        avatar={avatar}
+        onChange={handleRadioChange}
+        {...checkboxProps}
+      />
+    </ListRow>
+  );
+}
+
+RadioSelectOption.propTypes = {
+  label: PropTypes.node.isRequired,
+  desc: PropTypes.node,
+  value: valueType,
+  avatar: PropTypes.node,
+  readOnly: PropTypes.bool,
+  // Set by <SelectList>
+  checked: PropTypes.bool,
+  onChange: PropTypes.func,
+};
+
+RadioSelectOption.defaultProps = {
+  desc: null,
+  value: null,
+  avatar: null,
+  readOnly: false,
+  checked: false,
+  onChange: () => {},
+};
+
+RadioSelectOption.typeSymbol = TYPE_SYMBOL;
+
+export default RadioSelectOption;

packages/form/src/SelectList.js

@@ -11,9 +11,13 @@ import getRemainingProps from '@ichef/gypcrete/lib/utils/getRemainingProps';
 
 import Option, {
   valueType,
-  TYPE_SYMBOL as OPTION_TYPE_SYMBOL,
+  TYPE_SYMBOL as CHECKBOX_OPTION_TYPE_SYMBOL,
 } from './SelectOption';
 
+import {
+  TYPE_SYMBOL as RADIO_OPTION_TYPE_SYMBOL,
+} from './RadioSelectOption';
+
 import parseSelectOptions from './utils/parseSelectOptions';
 import getElementTypeSymbol from './utils/getElementTypeSymbol';
 
@@ -193,7 +197,11 @@ class SelectList extends PureComponent {
       const { checkedState } = this.state;
 
       return React.Children.map(children, (child) => {
-        if (getElementTypeSymbol(child) === OPTION_TYPE_SYMBOL) {
+        const elementTypeSymbol = getElementTypeSymbol(child);
+        if (
+          elementTypeSymbol === CHECKBOX_OPTION_TYPE_SYMBOL
+          || elementTypeSymbol === RADIO_OPTION_TYPE_SYMBOL
+        ) {
           return React.cloneElement(child, {
             checked: checkedState.get(child.props.value),
             onChange: this.handleOptionChange,

packages/form/src/utils/parseSelectOptions.js

@@ -1,5 +1,6 @@
 import { Fragment } from 'react';
-import { TYPE_SYMBOL } from '../SelectOption';
+import { TYPE_SYMBOL as CHECKBOX_OPTION_TYPE_SYMBOL } from '../SelectOption';
+import { TYPE_SYMBOL as RADIO_OPTION_TYPE_SYMBOL } from '../RadioSelectOption';
 
 import getElementTypeSymbol from './getElementTypeSymbol';
 
@@ -13,7 +14,11 @@ export default function parseSelectOptions(children) {
   const childArray = Array.isArray(children) ? children : [children].filter(item => item);
 
   const results = childArray.map((child) => {
-    if (getElementTypeSymbol(child) === TYPE_SYMBOL) {
+    const elementTypeSymbol = getElementTypeSymbol(child);
+    if (
+      elementTypeSymbol === CHECKBOX_OPTION_TYPE_SYMBOL
+      || elementTypeSymbol === RADIO_OPTION_TYPE_SYMBOL
+    ) {
       return child.props;
     }
 

packages/storybook/examples/form/RadioSelectList.stories.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+
+import RadioSelectList from '@ichef/gypcrete-form/src/RadioSelectList';
+import RadioSelectOption from '@ichef/gypcrete-form/src/RadioSelectOption';
+
+export default {
+  title: '@ichef/gypcrete-form|RadioSelectList',
+  component: RadioSelectList,
+  subcomponents: { RadioSelectOption },
+};
+
+export const singleUncontrolled = () => (
+  <RadioSelectList defaultValue="1" onChange={action('change')}>
+    <RadioSelectOption label="Option A" value="1" />
+    <RadioSelectOption label="Option B" value="2" />
+    <RadioSelectOption label="Option C" value="3" />
+  </RadioSelectList>
+);
+singleUncontrolled.story = {
+  name: 'Single-value (uncontrolled)',
+};
+
+export const singleControlled = () => (
+  <RadioSelectList value="1" onChange={action('change')}>
+    <RadioSelectOption label="Option A" value="1" />
+    <RadioSelectOption label="Option B" value="2" />
+    <RadioSelectOption label="Option C" value="3" />
+  </RadioSelectList>
+);
+singleControlled.story = {
+  name: 'Single-value (controlled)',
+  parameters: {
+    docs: {
+      storyDescription: 'Observe its onChange() should be firing with user-clicked option',
+    },
+  },
+};
+
+export const multipleWithReadOnly = () => (
+  <RadioSelectList
+    value="1"
+    onChange={action('change')}
+  >
+    <RadioSelectOption label="Option A" value="1" readOnly />
+    <RadioSelectOption label="Option B" value="2" />
+    <RadioSelectOption label="Option C" value="3" />
+  </RadioSelectList>
+);
+multipleWithReadOnly.story = {
+  name: 'With Read-only options',
+};