antd Rate JavaScript Examples

Source File: index.js From scalable-form-platform with MIT License

6 votes

render() {
        const {schema, options, value, disabled, readonly} = this.props;
        const {currentRateLabel} = this.state;
        let enumOptions = options.enumOptions || [];
        if (typeof schema.data !== 'undefined' && schema.data.length >= 0) {
            enumOptions = schema.data;
        }

        //解析schema中约定的_errorType字段，用来标识是validate中哪种类型校验不通过
        let validateMessage = '';
        const _errorType = options._errorType || '';
        if (_errorType !== '' && typeof options.validate !== 'undefined') {
            validateMessage = this._getValidateMessage(_errorType, options.validate);
        }

        return (
            <div className={classnames({
                'ant-form-item-control': true,
                'xform-custom-widget': true,
                'xform-custom-rate': true,
                'has-error': _errorType !== ''
            })}>
                <div>
                    <Rate
                        count={enumOptions.length}
                        disabled={disabled}
                        readOnly={readonly}
                        value={this.getRateNumberFromValue(value)}
                        onHoverChange={this.handleRateHoverChange}
                        onChange={this.handleRateNumberChange}
                    />
                    <span>{currentRateLabel}</span>
                </div>
                <div className="ant-form-explain">{validateMessage}</div>
            </div>
        );

    }

Source File: text.jsx From virtuoso-design-system with MIT License

6 votes

render() {
    const { value } = this.state;
    return (
      <span>
        <Rate tooltips={desc} onChange={this.handleChange} value={value} />
        {value ? <span className="ant-rate-text">{desc[value - 1]}</span> : ''}
      </span>
    );
  }

Source File: clear.jsx From virtuoso-design-system with MIT License

6 votes

storiesOf('antd/rate', module).add('clear', () => 
  <>
    <Rate defaultValue={3} />
    <span className="ant-rate-text">allowClear: true</span>
    <br />
    <Rate allowClear={false} defaultValue={3} />
    <span className="ant-rate-text">allowClear: false</span>
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Support set allow to clear star when click again.</p></>) } });

Source File: character.jsx From virtuoso-design-system with MIT License

6 votes

storiesOf('antd/rate', module).add('character', () => 
  <>
    <Rate character={<HeartOutlined />} allowHalf />
    <br />
    <Rate character="A" allowHalf style={{ fontSize: 36 }} />
    <br />
    <Rate character="好" allowHalf />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Replace the default star to other character like alphabet, digit, iconfont or even Chinese word.</p></>) } });

Source File: index.js From gobench with Apache License 2.0

6 votes

render() {
    return (
      <div>
        <h5 className="mb-3">
          <strong>Basic</strong>
        </h5>
        <div className="mb-3">
          <Rate defaultValue={3} />
        </div>
        <div className="mb-3">
          <span>
            <Rate allowHalf defaultValue={2.5} tooltips="good" />
            <span className="ant-rate-text">good</span>
          </span>
        </div>
        <div className="mb-3">
          <Rate defaultValue={3} character="W" />
        </div>
      </div>
    )
  }

Source File: basic.jsx From virtuoso-design-system with MIT License

5 votes

storiesOf('antd/rate', module).add('basic', () => <Rate />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>The simplest usage.</p></>) } });

Source File: character-function.jsx From virtuoso-design-system with MIT License

5 votes

storiesOf('antd/rate', module).add('character-function', () => 
  <>
    <Rate defaultValue={2} character={({ index }) => index + 1} />
    <br />
    <Rate defaultValue={3} character={({ index }) => customIcons[index + 1]} />
  </>,
  { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Can customize each character using <code>(RateProps) =&gt; ReactNode</code>.</p></>) } });

Source File: Rating.js From label-studio-frontend with Apache License 2.0

5 votes

HtxRating = inject("store")(
  observer(({ item, store }) => {
    let iconSize;

    if (item.size === "small") {
      iconSize = 15;
    } else if (item.size === "medium") {
      iconSize = 25;
    } else if (item.size === "large") {
      iconSize = 40;
    }

    const visibleStyle = item.perRegionVisible() ? {} : { display: "none" };

    // rc-rate component listens for keypress event and hit the star if the key is Enter
    // but it doesn't check for any modifiers, so it removes star during submit (ctrl+enter)
    // so we'll just remove focus from component at the moment any modifier pressed
    const dontBreakSubmit = e => {
      if (e.ctrlKey || e.metaKey || e.altKey || e.shiftKey) {
        // should be a star, because that's the only way this event can happen
        const star = document.activeElement;
        const control = e.currentTarget;

        // but we'll check that for sure
        if (control.contains(star)) star.blur();
      }
    };

    return (
      <div style={visibleStyle} onKeyDownCapture={dontBreakSubmit}>
        <Rate
          character={<StarOutlined style={{ fontSize: iconSize }} />}
          value={item.rating}
          count={Number(item.maxrating)}
          defaultValue={Number(item.defaultvalue)}
          onChange={item.setRating}
        />
        {store.settings.enableTooltips && store.settings.enableHotkeys && item.hotkey && (
          <sup style={{ fontSize: "9px" }}>[{item.hotkey}]</sup>
        )}
      </div>
    );
  }),
)

Source File: disabled.jsx From virtuoso-design-system with MIT License

5 votes

storiesOf('antd/rate', module).add('disabled', () => <Rate disabled defaultValue={2} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Read only, can't use mouse to interact.</p></>) } });

Source File: half.jsx From virtuoso-design-system with MIT License

5 votes

storiesOf('antd/rate', module).add('half', () => <Rate allowHalf defaultValue={2.5} />, { docs: { page: () => (<><h1 id="enus">en-US</h1>
<p>Support select half star.</p></>) } });

Source File: editForm.jsx From react-antd-admin-template with MIT License

5 votes

render() {
    const {
      visible,
      onCancel,
      onOk,
      form,
      confirmLoading,
      currentRowData,
    } = this.props;
    const { getFieldDecorator } = form;
    const { id, author, date, readings, star, status, title } = currentRowData;
    const formItemLayout = {
      labelCol: {
        sm: { span: 4 },
      },
      wrapperCol: {
        sm: { span: 16 },
      },
    };
    return (
      <Modal
        title="编辑"
        visible={visible}
        onCancel={onCancel}
        onOk={onOk}
        confirmLoading={confirmLoading}
      >
        <Form {...formItemLayout}>
          <Form.Item label="序号:">
            {getFieldDecorator("id", {
              initialValue: id,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="标题:">
            {getFieldDecorator("title", {
              rules: [{ required: true, message: "请输入标题!" }],
              initialValue: title,
            })(<Input placeholder="标题" />)}
          </Form.Item>
          <Form.Item label="作者:">
            {getFieldDecorator("author", {
              initialValue: author,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="阅读量:">
            {getFieldDecorator("readings", {
              initialValue: readings,
            })(<Input disabled />)}
          </Form.Item>
          <Form.Item label="推荐指数:">
            {getFieldDecorator("star", {
              initialValue: star.length,
            })(<Rate count={3} />)}
          </Form.Item>
          <Form.Item label="状态:">
            {getFieldDecorator("status", {
              initialValue: status,
            })(
              <Select style={{ width: 120 }}>
                <Select.Option value="published">published</Select.Option>
                <Select.Option value="draft">draft</Select.Option>
              </Select>
            )}
          </Form.Item>
          <Form.Item label="时间:">
            {getFieldDecorator("date", {
              rules: [{ type: 'object', required: true, message: '请选择时间!' }],
              initialValue: moment(date || "YYYY-MM-DD HH:mm:ss"),
            })(<DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />)}
          </Form.Item>
        </Form>
      </Modal>
    );
  }