@qlean/york-web - npm Package Compare versions

Comparing version 3.0.0 to 3.1.0

lib/components/inputs/TextInput/index.js

@@ -24,6 +24,19 @@ "use strict";
 
-var StyledTextInput = _styledComponents["default"].input.withConfig({
-  displayName: "TextInput__StyledTextInput",
+var StyledInput = _styledComponents["default"].input.withConfig({
+  displayName: "TextInput__StyledInput",
   componentId: "uz1wxm-0"
 })(["", ""], _utils.getInputCss);
+
+var StyledTextInput = _styledComponents["default"].div.withConfig({
+  displayName: "TextInput__StyledTextInput",
+  componentId: "uz1wxm-1"
+})(["position:relative;"]);
+
+var StyledRightView = _styledComponents["default"].div.withConfig({
+  displayName: "TextInput__StyledRightView",
+  componentId: "uz1wxm-2"
+})(["position:absolute;top:0;right:", "px;display:flex;align-items:center;height:100%;", ""], _utils.inputPaddingHorizontal, function (_ref) {
+  var width = _ref.width;
+  return "width: ".concat(width, "px;");
+});
 /**
@@ -35,11 +48,23 @@ * Базовое однострочное поле для ввода текста, аналог `input` без `type`.
 function TextInput(props) {
-  var isDisabled = props.isDisabled;
-  return _react["default"].createElement(StyledTextInput, _extends({}, props, {
+  var isDisabled = props.isDisabled,
+      rightView = props.rightView;
+  return _react["default"].createElement(StyledTextInput, null, _react["default"].createElement(StyledInput, _extends({}, props, {
     disabled: isDisabled
-  }));
+  })), rightView && _react["default"].createElement(StyledRightView, {
+    width: rightView.width
+  }, rightView.node));
 }
 
+TextInput.defaultProps = {
+  rightView: null
+};
 TextInput.propTypes = _objectSpread({}, _utils.inputPropTypes, {
   /** Значение поля */
-  value: _propTypes["default"].string.isRequired
+  value: _propTypes["default"].string.isRequired,
+
+  /** Блок справа. Его ширина должна быть фиксированной, чтобы у инпута корректно работал `padding-right` */
+  rightView: _propTypes["default"].shape({
+    node: _propTypes["default"].node.isRequired,
+    width: _propTypes["default"].number.isRequired
+  })
 });
@@ -46,0 +71,0 @@

lib/components/inputs/TextInput/README.md

@@ -15,2 +15,6 @@ ```js
         placeholder: 'Placeholder',
+        rightView: {
+          node: <img src={require('./assets/question.svg')} />,
+          width: 16,
+        },
       }
@@ -30,3 +34,3 @@ : {}
         >
-          title, caption, error, placeholder
+          title, caption, error, placeholder, rightView
         </Example.Checkbox>
@@ -33,0 +37,0 @@ <Example.Checkbox

lib/components/inputs/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.asInput = exports.inputPropTypes = exports.getInputCss = void 0;
+exports.asInput = exports.inputPropTypes = exports.getInputCss = exports.inputPaddingHorizontal = void 0;
 
@@ -27,2 +27,4 @@ var _react = _interopRequireDefault(require("react"));
 };
+var inputPaddingHorizontal = _utils.sizes[3];
+exports.inputPaddingHorizontal = inputPaddingHorizontal;
 
@@ -32,5 +34,6 @@ var getInputCss = function getInputCss(_ref) {
       error = _ref.error,
+      rightView = _ref.rightView,
       isFocused = _ref.isFocused,
       isDisabled = _ref.isDisabled;
-  return "\n  opacity: 1;\n  appearance: none;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  color: ".concat(_yorkCore.colors.coal, ";\n  background-color: ").concat(_yorkCore.colors.white, ";\n  height: ").concat(inputSizes[size], "px;\n  padding: 0 ").concat(_utils.sizes[3], "px;\n  font-family: ").concat(_utils.fontFamily, ";\n  font-size: 16px;\n  font-weight: 500;\n  border: 1px solid ").concat(_yorkCore.colors.silver, ";\n  border-radius: ").concat(_utils.borderRadiuses.small, ";\n  transition: ").concat(_utils.transitions["short"], ";\n  ").concat(error && !isDisabled ? "border-color: ".concat(_yorkCore.colors.red, ";") : '', "\n  ").concat(isDisabled ? "\n        color: ".concat(_yorkCore.colors.silver, ";\n        background-color: ").concat(_yorkCore.colors.smoke, ";\n        border-color: ").concat(_yorkCore.colors.silver, ";\n      ") : '', "\n  ").concat(isFocused && !isDisabled ? "border-color: ".concat(_yorkCore.colors.green, ";") : '', "\n  &::placeholder {\n    color: ").concat(_yorkCore.colors.grey, ";\n    ").concat(isDisabled ? "color: ".concat(_yorkCore.colors.silver, ";") : '', "\n  }\n  &:focus {\n    ").concat(!isDisabled ? "border-color: ".concat(_yorkCore.colors.green, ";") : '', "\n  }\n  &::-ms-clear {\n    display: none;\n  }\n");
+  return "\n  opacity: 1;\n  appearance: none;\n  width: 100%;\n  box-sizing: border-box;\n  outline: none;\n  color: ".concat(_yorkCore.colors.coal, ";\n  background-color: ").concat(_yorkCore.colors.white, ";\n  height: ").concat(inputSizes[size], "px;\n  padding: 0 ").concat(inputPaddingHorizontal, "px;\n  ").concat(rightView ? "padding-right: ".concat(_utils.sizes[2] + rightView.width + inputPaddingHorizontal, "px;") : '', "\n  font-family: ").concat(_utils.fontFamily, ";\n  font-size: 16px;\n  font-weight: 500;\n  border: 1px solid ").concat(_yorkCore.colors.silver, ";\n  border-radius: ").concat(_utils.borderRadiuses.small, ";\n  transition: ").concat(_utils.transitions["short"], ";\n  ").concat(error && !isDisabled ? "border-color: ".concat(_yorkCore.colors.red, ";") : '', "\n  ").concat(isDisabled ? "\n        color: ".concat(_yorkCore.colors.silver, ";\n        background-color: ").concat(_yorkCore.colors.smoke, ";\n        border-color: ").concat(_yorkCore.colors.silver, ";\n      ") : '', "\n  ").concat(isFocused && !isDisabled ? "border-color: ".concat(_yorkCore.colors.green, ";") : '', "\n  &::placeholder {\n    color: ").concat(_yorkCore.colors.grey, ";\n    ").concat(isDisabled ? "color: ".concat(_yorkCore.colors.silver, ";") : '', "\n  }\n  &:focus {\n    ").concat(!isDisabled ? "border-color: ".concat(_yorkCore.colors.green, ";") : '', "\n  }\n  &::-ms-clear {\n    display: none;\n  }\n");
 };
@@ -37,0 +40,0 @@

lib/components/simple/Button/index.js

@@ -143,12 +143,2 @@ "use strict";
 
-var normalizeColor = function normalizeColor(color, opacity) {
-  var rgbaColor = _yorkCore.rgbaColors[color];
-  if (!rgbaColor || !rgbaColor.a) return _yorkCore.colors.transparent;
-  if (R.isNil(opacity)) return _yorkCore.colors[color];
-  var r = rgbaColor.r,
-      g = rgbaColor.g,
-      b = rgbaColor.b;
-  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
-};
-
 var getBaseCss = function getBaseCss(_ref) {
@@ -160,4 +150,4 @@ var color = _ref.color,
       contentOpacity = _ref.contentOpacity;
-  var normalizedBackgroundColor = normalizeColor(backgroundColor, opacity);
-  var normalizedBorderColor = normalizeColor(borderColor, opacity);
+  var normalizedBackgroundColor = (0, _utils.normalizeColor)(backgroundColor, opacity);
+  var normalizedBorderColor = (0, _utils.normalizeColor)(borderColor, opacity);
   return "\n    color: ".concat(_yorkCore.colors[color], ";\n    background-color: ").concat(normalizedBackgroundColor, ";\n    border: 1px solid ").concat(normalizedBorderColor || normalizedBackgroundColor, ";\n    &>").concat(StyledContent, " {\n      opacity: ").concat(R.isNil(contentOpacity) ? 1 : contentOpacity, ";\n    }\n  ");
@@ -215,3 +205,3 @@ };
   var normalizedProps = (0, _utils.normalizeResponsivePreset)(getPreset, presetsByBackdropColorAndRank, rest);
-  var content = typeof children === 'string' ? _react["default"].createElement(StyledText, null, isSubmitting ? 'Подождите...' : children) : children;
+  var content = _react["default"].isValidElement(children) ? children : _react["default"].createElement(StyledText, null, isSubmitting ? 'Подождите...' : children);
   return _react["default"].createElement(StyledButton, _extends({}, rest, {
@@ -253,3 +243,3 @@ normalizedProps: normalizedProps,
 
-  /** Содержимое кнопки. Если это строка, она будет обернута в `<Text>` с параметрами по умолчанию. */
+  /** Содержимое кнопки. Если это элемент, то оно будет отображено как есть, иначе — обернуто в `<Text>` */
   children: _propTypes["default"].node.isRequired,
@@ -256,0 +246,0 @@

lib/components/simple/index.js

@@ -24,2 +24,8 @@ "use strict";
 });
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function get() {
+    return _Link["default"];
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
@@ -38,4 +44,6 @@ enumerable: true,
 
+var _Link = _interopRequireDefault(require("./Link"));
+
 var _Tooltip = _interopRequireDefault(require("./Tooltip"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

lib/utils.js

@@ -6,3 +6,3 @@ "use strict";
 });
-exports.getResponsivePropTypes = exports.mergeStyleProps = exports.normalizeResponsivePreset = exports.normalizeResponsiveProps = exports.media = exports.mediaBreakpoints = exports.fontFamily = exports.minScreenWidth = exports.zIndexes = exports.borderRadiuses = exports.transitions = exports.transitionTimings = exports.shadows = exports.sizes = exports.uiPoint = void 0;
+exports.normalizeColor = exports.getResponsivePropTypes = exports.mergeStyleProps = exports.normalizeResponsivePreset = exports.normalizeResponsiveProps = exports.media = exports.mediaBreakpoints = exports.fontFamily = exports.minScreenWidth = exports.zIndexes = exports.borderRadiuses = exports.transitions = exports.transitionTimings = exports.shadows = exports.sizes = exports.uiPoint = void 0;
 
@@ -141,2 +141,14 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
-exports.getResponsivePropTypes = getResponsivePropTypes;
+exports.getResponsivePropTypes = getResponsivePropTypes;
+
+var normalizeColor = function normalizeColor(color, opacity) {
+  var rgbaColor = _yorkCore.rgbaColors[color];
+  if (!rgbaColor || !rgbaColor.a) return _yorkCore.colors.transparent;
+  if (R.isNil(opacity)) return _yorkCore.colors[color];
+  var r = rgbaColor.r,
+      g = rgbaColor.g,
+      b = rgbaColor.b;
+  return "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(opacity, ")");
+};
+
+exports.normalizeColor = normalizeColor;

package.json

 {
   "name": "@qlean/york-web",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "",
@@ -25,3 +25,3 @@ "license": "MIT",
   },
-  "gitHead": "541ec614cc77533d142cb721ecf413a81ba1001c"
+  "gitHead": "a6a1dca015b5907b970900833610bf8efeced55e"
 }

src/components/inputs/TextInput/index.js

@@ -5,8 +5,27 @@ import React from 'react'
 
-import { inputPropTypes, getInputCss, asInput } from '../utils'
+import {
+  inputPropTypes,
+  inputPaddingHorizontal,
+  getInputCss,
+  asInput,
+} from '../utils'
 
-const StyledTextInput = styled.input`
+const StyledInput = styled.input`
   ${getInputCss}
 `
 
+const StyledTextInput = styled.div`
+  position: relative;
+`
+
+const StyledRightView = styled.div`
+  position: absolute;
+  top: 0;
+  right: ${inputPaddingHorizontal}px;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  ${({ width }) => `width: ${width}px;`}
+`
+
 /**
@@ -16,6 +35,19 @@ * Базовое однострочное поле для ввода текста, аналог `input` без `type`.
 function TextInput(props) {
-  const { isDisabled } = props
-  return <StyledTextInput {...props} disabled={isDisabled} />
+  const { isDisabled, rightView } = props
+  return (
+    <StyledTextInput>
+      <StyledInput {...props} disabled={isDisabled} />
+      {rightView && (
+        <StyledRightView width={rightView.width}>
+          {rightView.node}
+        </StyledRightView>
+      )}
+    </StyledTextInput>
+  )
 }
 
+TextInput.defaultProps = {
+  rightView: null,
+}
+
 TextInput.propTypes = {
@@ -25,4 +57,9 @@ ...inputPropTypes,
   value: PropTypes.string.isRequired,
+  /** Блок справа. Его ширина должна быть фиксированной, чтобы у инпута корректно работал `padding-right` */
+  rightView: PropTypes.shape({
+    node: PropTypes.node.isRequired,
+    width: PropTypes.number.isRequired,
+  }),
 }
 
 export default asInput(TextInput)

src/components/inputs/TextInput/README.md

@@ -15,2 +15,6 @@ ```js
         placeholder: 'Placeholder',
+        rightView: {
+          node: <img src={require('./assets/question.svg')} />,
+          width: 16,
+        },
       }
@@ -30,3 +34,3 @@ : {}
         >
-          title, caption, error, placeholder
+          title, caption, error, placeholder, rightView
         </Example.Checkbox>
@@ -33,0 +37,0 @@ <Example.Checkbox

src/components/inputs/utils.js

@@ -20,3 +20,11 @@ import React from 'react'
 
-export const getInputCss = ({ size, error, isFocused, isDisabled }) => `
+export const inputPaddingHorizontal = sizes[3]
+
+export const getInputCss = ({
+  size,
+  error,
+  rightView,
+  isFocused,
+  isDisabled,
+}) => `
   opacity: 1;
@@ -30,3 +38,10 @@ appearance: none;
   height: ${inputSizes[size]}px;
-  padding: 0 ${sizes[3]}px;
+  padding: 0 ${inputPaddingHorizontal}px;
+  ${
+    rightView
+      ? `padding-right: ${sizes[2] +
+          rightView.width +
+          inputPaddingHorizontal}px;`
+      : ''
+  }
   font-family: ${fontFamily};
@@ -33,0 +48,0 @@ font-size: 16px;

src/components/simple/Button/index.js

 import React from 'react'
 import PropTypes from 'prop-types'
-import { colors, rgbaColors } from '@qlean/york-core'
+import { colors } from '@qlean/york-core'
 import styled from 'styled-components'
@@ -16,2 +16,3 @@ import * as R from 'ramda'
   getResponsivePropTypes,
+  normalizeColor,
 } from 'york-web/utils'
@@ -129,10 +130,2 @@
 
-const normalizeColor = (color, opacity) => {
-  const rgbaColor = rgbaColors[color]
-  if (!rgbaColor || !rgbaColor.a) return colors.transparent
-  if (R.isNil(opacity)) return colors[color]
-  const { r, g, b } = rgbaColor
-  return `rgba(${r}, ${g}, ${b}, ${opacity})`
-}
-
 const getBaseCss = ({
@@ -221,8 +214,7 @@ color,
   )
-  const content =
-    typeof children === 'string' ? (
-      <StyledText>{isSubmitting ? 'Подождите...' : children}</StyledText>
-    ) : (
-      children
-    )
+  const content = React.isValidElement(children) ? (
+    children
+  ) : (
+    <StyledText>{isSubmitting ? 'Подождите...' : children}</StyledText>
+  )
   return (
@@ -269,3 +261,3 @@ <StyledButton
   name: PropTypes.string.isRequired,
-  /** Содержимое кнопки. Если это строка, она будет обернута в `<Text>` с параметрами по умолчанию. */
+  /** Содержимое кнопки. Если это элемент, то оно будет отображено как есть, иначе — обернуто в `<Text>` */
   children: PropTypes.node.isRequired,
@@ -272,0 +264,0 @@ /** Активна ли кнопка */

src/components/simple/index.js

 export { default as Button } from './Button'
 export { default as GridColumn } from './GridColumn'
 export { default as GridContainer } from './GridContainer'
+export { default as Link } from './Link'
 export { default as Tooltip } from './Tooltip'

src/utils.js

 import PropTypes from 'prop-types'
 import * as R from 'ramda'
-import { sizes as coreSizes } from '@qlean/york-core'
+import { sizes as coreSizes, colors, rgbaColors } from '@qlean/york-core'
 
@@ -137,1 +137,9 @@ export const uiPoint = 5
 })
+
+export const normalizeColor = (color, opacity) => {
+  const rgbaColor = rgbaColors[color]
+  if (!rgbaColor || !rgbaColor.a) return colors.transparent
+  if (R.isNil(opacity)) return colors[color]
+  const { r, g, b } = rgbaColor
+  return `rgba(${r}, ${g}, ${b}, ${opacity})`
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

130741

increased by15.37%

Number of package files

65

increased by10.17%

Lines of code

2373

increased by16.61%

No dependency changes