wix-style-react/src/Range/docs/Range.examples.js

wix-style-react

export const _structure = `
<Range>
  <StorybookComponents.Placeholder>First Input</StorybookComponents.Placeholder>
  <StorybookComponents.Placeholder>Second Input</StorybookComponents.Placeholder>
</Range>;
`;

export const _rangeType = `
() => {
  const [fromDate, setFromDate] = React.useState();
  const [toDate, setToDate] = React.useState();

  return (
    <StorybookComponents.Stack flexDirection="column">
      <Range>
        <DatePicker
          placeholderText="Date"
          value={fromDate}
          onChange={setFromDate}
        />
        <DatePicker
          placeholderText="Date"
          value={toDate}
          onChange={setToDate}
        />
      </Range>
      <Range>
        <NumberInput placeholder="Number" />
        <NumberInput placeholder="Number" />
      </Range>
      <Range>
        <Input placeholder="Input" type="number" />
        <Input placeholder="Input" type="number" />
      </Range>
    </StorybookComponents.Stack>
  );
};
`;

export const _status = `
<StorybookComponents.Stack flexDirection="column">
  <Range>
    <DatePicker placeholderText="From" id="fromDate" status="error" />
    <DatePicker placeholderText="To" id="toDate" status="error" />
  </Range>
  <Range>
    <NumberInput placeholder="From" status="warning" />
    <NumberInput placeholder="To" status="warning" />
  </Range>
  <Range>
    <Input placeholder="From" status="loading" />
    <Input placeholder="To" status="loading" />
  </Range>
</StorybookComponents.Stack>;
`;

export const _disabled = `() => {
  const [fromDate, setFromDate] = React.useState();
  const [toDate, setToDate] = React.useState();
  const [toDateDisabled, setToDateDisabled] = React.useState(false);

  const renderRange = () => (
    <Range>
      <DatePicker
        placeholderText="From"
        id="fromDate"
        value={fromDate}
        onChange={setFromDate}
      />
      <DatePicker
        placeholderText={toDateDisabled ? '--/--/----' : 'To'}
        id="toDate"
        disabled={toDateDisabled}
        value={toDate}
        onChange={setToDate}
      />
    </Range>
  );

  const renderDateDisabledCheckbox = () => (
    <Checkbox
      checked={toDateDisabled}
      onChange={() => setToDateDisabled(!toDateDisabled)}
    >
      Don't set an end date
    </Checkbox>
  );

  return (
    <FormField
      label="Valid between"
      infoContent="Set when the coupon is valid from and when it expires."
    >
      <Box gap="24px">
        {renderRange()}
        {renderDateDisabledCheckbox()}
      </Box>
    </FormField>
  );
};
`;

export const _multipleValues = `
() => {
  const [hours, setHours] = React.useState(4);
  const [minutes, setMinutes] = React.useState(15);

  return (
    <Box gap="15px">
      <FormField label="Session Duration">
        <Range>
          <NumberInput
            suffix={<Input.Affix>Hrs</Input.Affix>}
            value={hours}
            onChange={setHours}
          />
          <NumberInput
            suffix={<Input.Affix>Min</Input.Affix>}
            value={minutes}
            onChange={setMinutes}
          />
        </Range>
      </FormField>
      <FormField
        label="Buffer Time"
        infoContent="Adding a few minutes after each session is a good way to create short breaks."
      >
        <Dropdown
          placeholder="Select"
          options={[
            { id: 0, value: '5 min' },
            { id: 1, value: '10 min' },
            { id: 2, value: '15 min' },
            { id: 2, value: '20 min' },
          ]}
        />
      </FormField>
    </Box>
  );
};
`;