index.js 2.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. import React, { Component } from 'react';
  2. import './index.less';
  3. import { Icon } from 'antd';
  4. export class SpecialRadio extends Component {
  5. render() {
  6. const { checked, children, onClick, theme = '', width, space } = this.props;
  7. return (
  8. <div
  9. className={`g-special-radio-wrapper ${theme} ${checked ? 'checked' : ''}`}
  10. style={{ width: width || '', marginLeft: space || '', marginRight: space || '' }}
  11. >
  12. <div className="g-special-radio" onClick={() => onClick && onClick()}>
  13. {children}
  14. <Icon type="check" />
  15. </div>
  16. </div>
  17. );
  18. }
  19. }
  20. export class SpecialRadioGroup extends Component {
  21. onClickItem(value) {
  22. const { onChange } = this.props;
  23. if (onChange) onChange(value);
  24. }
  25. render() {
  26. const { list = [], value, values = [], theme, space, width } = this.props;
  27. return (
  28. <div className="g-special-radio-group" style={{ marginLeft: space * -1 || '', marginRight: space * -1 || '' }}>
  29. {list.map(item => {
  30. return (
  31. <SpecialRadio
  32. theme={theme}
  33. checked={value === item.value || values.indexOf(item.value) >= 0}
  34. onClick={() => this.onClickItem(item.value)}
  35. width={width}
  36. space={space}
  37. >
  38. {item.label}
  39. </SpecialRadio>
  40. );
  41. })}
  42. </div>
  43. );
  44. }
  45. }
  46. export default class Radio extends Component {
  47. render() {
  48. const { checked, children, onClick } = this.props;
  49. return (
  50. <div className={`g-radio-wrapper ${checked ? 'checked' : ''}`}>
  51. <div className="g-radio" onClick={() => onClick && onClick()}>
  52. {children}
  53. </div>
  54. </div>
  55. );
  56. }
  57. }
  58. export class RadioGroup extends Component {
  59. onClickItem(key) {
  60. const { onChange } = this.props;
  61. if (onChange) onChange(key);
  62. }
  63. render() {
  64. const { list = [], value } = this.props;
  65. return (
  66. <div className="g-radio-group">
  67. {list.map(item => {
  68. return (
  69. <Radio checked={value === item.key} onClick={() => this.onClickItem(item.key)}>
  70. {item.label}
  71. </Radio>
  72. );
  73. })}
  74. </div>
  75. );
  76. }
  77. }