react95-native/dist/module/components/ColorPicker/ColorPicker.js

Refreshed Windows 95 style UI components for your React Native app

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

import React from 'react';
import { StyleSheet, TouchableHighlight, View } from 'react-native';
import { withTheme } from '../../core/theming';
import { Border } from '../../styles/styleElements';
const colorPreviewSize = 34; // eslint-disable-next-line @typescript-eslint/no-explicit-any

function chunk(arr, chunkSize) {
  const R = [];

  for (let i = 0, len = arr.length; i < len; i += chunkSize) R.push(arr.slice(i, i + chunkSize));

  return R;
}

const ColorPicker = ({
  colors,
  colorsPerRow = 5,
  onChange,
  style,
  theme,
  value,
  wide = false,
  ...rest
}) => {
  const handleColorPress = v => {
    onChange === null || onChange === void 0 ? void 0 : onChange(v);
  };

  const rows = chunk(colors, colorsPerRow);
  return /*#__PURE__*/React.createElement(View, _extends({
    style: style
  }, rest), rows.map((rowColors, i) => /*#__PURE__*/React.createElement(View, {
    style: styles.row,
    key: i
  }, rowColors.map(color => {
    // TODO: pick more visible cborders olors for selected item
    const isSelected = color === value;
    return /*#__PURE__*/React.createElement(TouchableHighlight, {
      key: color,
      onPress: () => handleColorPress(color),
      style: [styles.colorPreview, {
        width: (wide ? 1.4 : 1) * colorPreviewSize,
        height: colorPreviewSize,
        borderWidth: 2,
        borderColor: isSelected ? theme.materialText : 'transparent'
      }]
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        backgroundColor: color,
        borderWidth: isSelected ? 2 : 0,
        borderColor: theme.canvas
      }
    }, /*#__PURE__*/React.createElement(View, {
      style: {
        flex: 1,
        borderWidth: isSelected ? 2 : 0,
        borderColor: theme.materialText
      }
    }, !isSelected && /*#__PURE__*/React.createElement(Border, {
      variant: "cutout",
      theme: theme
    }))));
  }))));
};

const styles = StyleSheet.create({
  row: {
    flexDirection: 'row'
  },
  colorPreview: {
    width: colorPreviewSize,
    height: colorPreviewSize
  }
});
export default withTheme(ColorPicker);
//# sourceMappingURL=ColorPicker.js.map