@sproutsocial/racine
Advanced tools
Comparing version 0.1.4 to 0.1.5
@@ -5,2 +5,13 @@ # Change Log | ||
<a name="0.1.5"></a> | ||
## [0.1.5](https://github.com/sproutsocial/racine/compare/v0.1.4...v0.1.5) (2018-06-12) | ||
### Features | ||
* add Textarea component ([#104](https://github.com/sproutsocial/racine/issues/104)) ([bea0984](https://github.com/sproutsocial/racine/commit/bea0984)) | ||
* **Badge:** get badge up to parity with workshop ([#111](https://github.com/sproutsocial/racine/issues/111)) ([225efe9](https://github.com/sproutsocial/racine/commit/225efe9)) | ||
<a name="0.1.4"></a> | ||
@@ -7,0 +18,0 @@ ## [0.1.4](https://github.com/sproutsocial/racine/compare/v0.1.3...v0.1.4) (2018-05-23) |
@@ -79,3 +79,3 @@ (function webpackUniversalModuleDefinition(root, factory) { | ||
/******/ // Load entry module and return exports | ||
/******/ return __webpack_require__(__webpack_require__.s = 11); | ||
/******/ return __webpack_require__(__webpack_require__.s = 12); | ||
/******/ }) | ||
@@ -164,3 +164,3 @@ /************************************************************************/ | ||
var _EnumIconNames = __webpack_require__(4); | ||
var _EnumIconNames = __webpack_require__(5); | ||
@@ -255,2 +255,107 @@ var _propTypes = _interopRequireDefault(__webpack_require__(0)); | ||
}); | ||
exports.default = void 0; | ||
var React = _interopRequireWildcard(__webpack_require__(1)); | ||
var _classnames = _interopRequireDefault(__webpack_require__(2)); | ||
var _propTypes = _interopRequireDefault(__webpack_require__(0)); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
/** | ||
* General use Character counter component | ||
*/ | ||
var CharacterCounter = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(CharacterCounter, _React$Component); | ||
function CharacterCounter() { | ||
var _ref; | ||
var _temp, _this; | ||
_classCallCheck(this, CharacterCounter); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref = CharacterCounter.__proto__ || Object.getPrototypeOf(CharacterCounter)).call.apply(_ref, [this].concat(args))), Object.defineProperty(_assertThisInitialized(_this), "getClasses", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value(overlimit) { | ||
return (0, _classnames.default)("CharacterCounter", "CharacterCounter-".concat(_this.props.size), { | ||
"CharacterCounter-overlimit": overlimit | ||
}); | ||
} | ||
}), _temp)); | ||
} | ||
_createClass(CharacterCounter, [{ | ||
key: "render", | ||
value: function render() { | ||
var remaining = this.props.maxValue - this.props.currentValue; | ||
return React.createElement("div", { | ||
className: this.getClasses(remaining <= 0) | ||
}, remaining); | ||
} | ||
}]); | ||
return CharacterCounter; | ||
}(React.Component); | ||
exports.default = CharacterCounter; | ||
Object.defineProperty(CharacterCounter, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
size: "default" | ||
} | ||
}); | ||
Object.defineProperty(CharacterCounter, "propTypes", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
/** Current value of relative input/textarea */ | ||
currentValue: _propTypes.default.number.isRequired, | ||
/** Max amount of characters for input/textarea */ | ||
maxValue: _propTypes.default.number.isRequired, | ||
/** Size of the Counter */ | ||
size: _propTypes.default.oneOf(["default", "mini"]).isRequired | ||
} | ||
}); | ||
/***/ }), | ||
/* 5 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.bpfrpt_proptype_EnumIconNames = void 0; | ||
@@ -267,3 +372,3 @@ | ||
/***/ }), | ||
/* 5 */ | ||
/* 6 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -283,2 +388,4 @@ | ||
var _CharacterCounter = _interopRequireDefault(__webpack_require__(4)); | ||
var _propTypes = _interopRequireDefault(__webpack_require__(0)); | ||
@@ -306,2 +413,375 @@ | ||
var Textarea = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(Textarea, _React$Component); | ||
function Textarea() { | ||
var _ref; | ||
var _temp, _this; | ||
_classCallCheck(this, Textarea); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref = Textarea.__proto__ || Object.getPrototypeOf(Textarea)).call.apply(_ref, [this].concat(args))), Object.defineProperty(_assertThisInitialized(_this), "maxHeight", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: 0 | ||
}), Object.defineProperty(_assertThisInitialized(_this), "state", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
value: _this.props.manageOwnState && _this.props.value ? _this.props.value : "", | ||
minHeight: 0 | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "componentWillReceiveProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value(nextProps) { | ||
if (_this.props.manageOwnState && nextProps.value === "") { | ||
_this.setState({ | ||
value: nextProps.value | ||
}); | ||
} | ||
if (_this.props.rows !== nextProps.rows) { | ||
_this.setMinHeight(nextProps.rows); | ||
} | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "componentDidMount", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
if (_this.props.autoExpandable) { | ||
_this.recomputeSize(); | ||
} | ||
_this.props.autoFocus && _this.el && _this.el.focus(); | ||
_this.setMinHeight(); | ||
_this.maxHeight = parseInt(window.getComputedStyle(_this.el)["max-height"].replace("px", ""), 10); | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "componentDidUpdate", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
if (_this.props.autoExpandable) { | ||
_this.recomputeSize(); | ||
} | ||
if (_this.props.autoFocus && _this.props.autoRefocus) { | ||
_this.el && _this.el.focus(); | ||
} | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "getValue", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
if (_this.props.manageOwnState) { | ||
return _this.state.value; | ||
} | ||
return _this.props.value; | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "getValueLength", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function (_value) { | ||
function value(_x) { | ||
return _value.apply(this, arguments); | ||
} | ||
value.toString = function () { | ||
return _value.toString(); | ||
}; | ||
return value; | ||
}(function (value) { | ||
if (_this.props.getTextLength) { | ||
return _this.props.getTextLength(value || ""); | ||
} | ||
return (value || "").length; | ||
}) | ||
}), Object.defineProperty(_assertThisInitialized(_this), "setMinHeight", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value(desiredRows) { | ||
var rows = desiredRows || _this.props.rows; | ||
var computedStyle = window.getComputedStyle(_this.el); | ||
var getComputedStyleValue = function getComputedStyleValue(rule) { | ||
return parseInt(computedStyle[rule].replace("px", ""), 10); | ||
}; // IE may return the proportional value for line-height, not the pixel value | ||
var lineHeight = computedStyle["line-height"].match(/px/) ? getComputedStyleValue("line-height") : parseFloat(computedStyle["line-height"]) * getComputedStyleValue("font-size"); | ||
var minHeight = rows * lineHeight + getComputedStyleValue("padding-top") + getComputedStyleValue("padding-bottom"); | ||
if (isNaN(minHeight)) { | ||
_this.setState({ | ||
minHeight: 0 | ||
}); | ||
} else { | ||
_this.setState({ | ||
minHeight: minHeight | ||
}); | ||
} | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "recomputeSize", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
var node = _this.el; | ||
if (node && node.scrollHeight > _this.state.minHeight) { | ||
node.style.height = "auto"; | ||
node.style.overflowY = "hidden"; | ||
node.style.height = node.scrollHeight + "px"; | ||
if (node.scrollHeight > _this.maxHeight) { | ||
node.style.overflowY = "scroll"; | ||
} | ||
} | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "handleTextareaChange", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value(event) { | ||
var maxLength = _this.props.maxLength; | ||
var value = event.currentTarget.value; // If the new value is too long, keep the old value. | ||
// This won't handle pasting text that's too long, but hopefully that's not a big issue. | ||
if (maxLength && _this.getValueLength(value) > maxLength) { | ||
value = _this.getValue(); | ||
} | ||
if (_this.props.manageOwnState) { | ||
_this.setState({ | ||
value: value | ||
}); | ||
} | ||
_this.props.onChange(event); | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "handleCharacterCounter", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
var _this$props = _this.props, | ||
value = _this$props.value, | ||
maxLength = _this$props.maxLength, | ||
characterCounterThreshold = _this$props.characterCounterThreshold; | ||
return maxLength ? !(_this.getValueLength(value) < characterCounterThreshold) : false; | ||
} | ||
}), Object.defineProperty(_assertThisInitialized(_this), "getClassName", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value() { | ||
return (0, _classnames.default)("Textarea", { | ||
"Textarea--error": _this.props.errors.length | ||
}, { | ||
"Textarea--expandable": _this.props.autoExpandable | ||
}, { | ||
"Textarea--noBorder": _this.props.noBorder | ||
}, { | ||
"is-large": _this.props.textSize === "large" | ||
}, { | ||
"is-disabled": _this.props.disabled | ||
}, { | ||
"Textarea--charactercounter": _this.props.maxLength | ||
}, _this.props.className); | ||
} | ||
}), _temp)); | ||
} | ||
_createClass(Textarea, [{ | ||
key: "render", | ||
//////////////////////////////////////// | ||
value: function render() { | ||
var _this2 = this; | ||
var appliedMinHeight = this.props.hardMinHeight ? this.props.hardMinHeight : this.state.minHeight; | ||
return React.createElement("div", _extends({ | ||
className: this.getClassName(), | ||
"data-qa-textarea": this.props.id | ||
}, this.props.qa), React.createElement("textarea", { | ||
ref: function ref(node) { | ||
return _this2.el = node; | ||
}, | ||
style: { | ||
minHeight: appliedMinHeight | ||
}, | ||
id: this.props.id, | ||
className: "Textarea-htmlTextarea", | ||
value: this.getValue(), | ||
name: this.props.name, | ||
placeholder: this.props.placeholder, | ||
rows: this.props.rows, | ||
onChange: this.handleTextareaChange, | ||
onKeyUp: this.props.onKeyUp, | ||
onKeyDown: this.props.onKeyDown, | ||
onBlur: this.props.onBlur, | ||
disabled: this.props.disabled, | ||
onFocus: this.props.onFocus, | ||
"data-qa-input": this.props.name | ||
}), !!this.props.errors.length && React.createElement("div", { | ||
className: "Textarea-messages" | ||
}, this.props.errors.map(function (error, index) { | ||
return React.createElement("div", { | ||
className: "Textarea-message--error", | ||
key: index | ||
}, error); | ||
})), this.handleCharacterCounter() && React.createElement("div", { | ||
className: "Textarea-charactercounter" | ||
}, React.createElement(_CharacterCounter.default, { | ||
currentValue: this.getValueLength(this.getValue()), | ||
maxValue: this.props.maxLength | ||
}))); | ||
} | ||
}]); | ||
return Textarea; | ||
}(React.Component); | ||
exports.default = Textarea; | ||
Object.defineProperty(Textarea, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
value: "", | ||
onChange: function onChange() {}, | ||
placeholder: "", | ||
maxLength: 0, | ||
rows: 3, | ||
onKeyUp: function onKeyUp() {}, | ||
onKeyDown: function onKeyDown() {}, | ||
onFocus: function onFocus() {}, | ||
onBlur: function onBlur() {}, | ||
disabled: false, | ||
autoExpandable: false, | ||
noBorder: false, | ||
autoFocus: false, | ||
autoRefocus: true, | ||
textSize: "default", | ||
manageOwnState: false, | ||
errors: [], | ||
characterCounterThreshold: 0, | ||
useNativeCharacterCount: false | ||
} | ||
}); | ||
Object.defineProperty(Textarea, "propTypes", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
value: _propTypes.default.string.isRequired, | ||
name: _propTypes.default.string, | ||
onChange: _propTypes.default.func.isRequired, | ||
id: _propTypes.default.string, | ||
placeholder: _propTypes.default.string.isRequired, | ||
rows: _propTypes.default.number.isRequired, | ||
onKeyUp: _propTypes.default.func.isRequired, | ||
onKeyDown: _propTypes.default.func.isRequired, | ||
onFocus: _propTypes.default.func.isRequired, | ||
onBlur: _propTypes.default.func.isRequired, | ||
disabled: _propTypes.default.bool.isRequired, | ||
/* Set the textarea to autogrow as it gets taller */ | ||
autoExpandable: _propTypes.default.bool.isRequired, | ||
/* Strip the textarea of its padding and border */ | ||
noBorder: _propTypes.default.bool.isRequired, | ||
/* Auto focus the textarea on mount */ | ||
autoFocus: _propTypes.default.bool.isRequired, | ||
/* Auto refocus the textarea on new props */ | ||
autoRefocus: _propTypes.default.bool.isRequired, | ||
/* Size of text in the textarea */ | ||
textSize: _propTypes.default.oneOf(["default", "large"]).isRequired, | ||
manageOwnState: _propTypes.default.bool.isRequired, | ||
/* Validation errors as an array of strings. */ | ||
errors: _propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, | ||
/* Maximum amount of characters allowed in Textarea for CharacterCounter.*/ | ||
maxLength: _propTypes.default.number.isRequired, | ||
/* If you don't want to show a CharacterCounter at all times but specify when it should show up, pass in a threshold. */ | ||
characterCounterThreshold: _propTypes.default.number.isRequired, | ||
/* Provide a min-height for the textarea if needed. */ | ||
hardMinHeight: _propTypes.default.number, | ||
/** | ||
* This determines whether to use the `length` property of | ||
* the value or use `props.getTextLength()`. In | ||
* MOST cases you want to leave this off and use the Twitter | ||
* library by passing in its length method to the `getTextLength` prop. | ||
*/ | ||
useNativeCharacterCount: _propTypes.default.bool.isRequired, | ||
getTextLength: _propTypes.default.func, | ||
className: _propTypes.default.string, | ||
qa: _propTypes.default.object | ||
} | ||
}); | ||
/***/ }), | ||
/* 7 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.default = void 0; | ||
var React = _interopRequireWildcard(__webpack_require__(1)); | ||
var _classnames = _interopRequireDefault(__webpack_require__(2)); | ||
var _propTypes = _interopRequireDefault(__webpack_require__(0)); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
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); } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
/** | ||
@@ -414,3 +894,3 @@ * A styled Radio input component | ||
/***/ }), | ||
/* 6 */ | ||
/* 8 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -588,3 +1068,3 @@ | ||
/***/ }), | ||
/* 7 */ | ||
/* 9 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -602,107 +1082,2 @@ | ||
var _classnames = _interopRequireDefault(__webpack_require__(2)); | ||
var _propTypes = _interopRequireDefault(__webpack_require__(0)); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } } | ||
function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } | ||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } | ||
function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } | ||
function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } | ||
function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } | ||
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } | ||
/** | ||
* General use Character counter component | ||
*/ | ||
var CharacterCounter = | ||
/*#__PURE__*/ | ||
function (_React$Component) { | ||
_inherits(CharacterCounter, _React$Component); | ||
function CharacterCounter() { | ||
var _ref; | ||
var _temp, _this; | ||
_classCallCheck(this, CharacterCounter); | ||
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { | ||
args[_key] = arguments[_key]; | ||
} | ||
return _possibleConstructorReturn(_this, (_temp = _this = _possibleConstructorReturn(this, (_ref = CharacterCounter.__proto__ || Object.getPrototypeOf(CharacterCounter)).call.apply(_ref, [this].concat(args))), Object.defineProperty(_assertThisInitialized(_this), "getClasses", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: function value(overlimit) { | ||
return (0, _classnames.default)("CharacterCounter", "CharacterCounter-".concat(_this.props.size), { | ||
"CharacterCounter-overlimit": overlimit | ||
}); | ||
} | ||
}), _temp)); | ||
} | ||
_createClass(CharacterCounter, [{ | ||
key: "render", | ||
value: function render() { | ||
var remaining = this.props.maxValue - this.props.currentValue; | ||
return React.createElement("div", { | ||
className: this.getClasses(remaining <= 0) | ||
}, remaining); | ||
} | ||
}]); | ||
return CharacterCounter; | ||
}(React.Component); | ||
exports.default = CharacterCounter; | ||
Object.defineProperty(CharacterCounter, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
size: "default" | ||
} | ||
}); | ||
Object.defineProperty(CharacterCounter, "propTypes", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
/** Current value of relative input/textarea */ | ||
currentValue: _propTypes.default.number.isRequired, | ||
/** Max amount of characters for input/textarea */ | ||
maxValue: _propTypes.default.number.isRequired, | ||
/** Size of the Counter */ | ||
size: _propTypes.default.oneOf(["default", "mini"]).isRequired | ||
} | ||
}); | ||
/***/ }), | ||
/* 8 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
"use strict"; | ||
Object.defineProperty(exports, "__esModule", { | ||
value: true | ||
}); | ||
exports.default = void 0; | ||
var React = _interopRequireWildcard(__webpack_require__(1)); | ||
var _Icon = _interopRequireDefault(__webpack_require__(3)); | ||
@@ -792,3 +1167,3 @@ | ||
/***/ }), | ||
/* 9 */ | ||
/* 10 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -853,5 +1228,3 @@ | ||
value: function value() { | ||
return (0, _classnames.default)("Badge", "_".concat(_this.props.type), "_".concat(_this.props.size), { | ||
ss_tip: _this.props.tip | ||
}); | ||
return (0, _classnames.default)("Badge", "Badge--".concat(_this.props.type), "Badge--".concat(_this.props.size)); | ||
} | ||
@@ -866,4 +1239,3 @@ }), _temp)); | ||
className: this.getClassNames(), | ||
"data-tip": this.props.tip, | ||
"data-sketch-symbol": "Badge/".concat(this.props.type) | ||
"data-tip": this.props.tip | ||
}, this.props.text); | ||
@@ -877,2 +1249,11 @@ } | ||
exports.default = Badge; | ||
Object.defineProperty(Badge, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
type: "primary", | ||
size: "default" | ||
} | ||
}); | ||
Object.defineProperty(Badge, "propTypes", { | ||
@@ -884,6 +1265,6 @@ configurable: true, | ||
/** Text for the Badge */ | ||
text: _propTypes.default.string.isRequired, | ||
text: _propTypes.default.node.isRequired, | ||
/** Type of Badge is based off of `<Button />` component styles */ | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive"]).isRequired, | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive", "common", "approval"]).isRequired, | ||
@@ -899,3 +1280,3 @@ /** Size of Badge, based based on `<Button />` component styles */ | ||
/***/ }), | ||
/* 10 */ | ||
/* 11 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -1022,3 +1403,3 @@ | ||
/***/ }), | ||
/* 11 */ | ||
/* 12 */ | ||
/***/ (function(module, exports, __webpack_require__) { | ||
@@ -1074,2 +1455,8 @@ | ||
}); | ||
Object.defineProperty(exports, "Textarea", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Textarea.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "bpfrpt_proptype_EnumIconNames", { | ||
@@ -1084,16 +1471,18 @@ enumerable: true, | ||
var _Alert = _interopRequireDefault(__webpack_require__(10)); | ||
var _Alert = _interopRequireDefault(__webpack_require__(11)); | ||
var _Badge = _interopRequireDefault(__webpack_require__(9)); | ||
var _Badge = _interopRequireDefault(__webpack_require__(10)); | ||
var _Indicator = _interopRequireDefault(__webpack_require__(8)); | ||
var _Indicator = _interopRequireDefault(__webpack_require__(9)); | ||
var _CharacterCounter = _interopRequireDefault(__webpack_require__(7)); | ||
var _CharacterCounter = _interopRequireDefault(__webpack_require__(4)); | ||
var _Checkbox = _interopRequireDefault(__webpack_require__(6)); | ||
var _Checkbox = _interopRequireDefault(__webpack_require__(8)); | ||
var _Radio = _interopRequireDefault(__webpack_require__(5)); | ||
var _Radio = _interopRequireDefault(__webpack_require__(7)); | ||
var _EnumIconNames = __webpack_require__(4); | ||
var _Textarea = _interopRequireDefault(__webpack_require__(6)); | ||
var _EnumIconNames = __webpack_require__(5); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } | ||
@@ -1100,0 +1489,0 @@ |
@@ -31,5 +31,3 @@ "use strict"; | ||
value: () => { | ||
return (0, _classnames.default)("Badge", `_${this.props.type}`, `_${this.props.size}`, { | ||
ss_tip: this.props.tip | ||
}); | ||
return (0, _classnames.default)("Badge", `Badge--${this.props.type}`, `Badge--${this.props.size}`); | ||
} | ||
@@ -42,4 +40,3 @@ }), _temp; | ||
className: this.getClassNames(), | ||
"data-tip": this.props.tip, | ||
"data-sketch-symbol": `Badge/${this.props.type}` | ||
"data-tip": this.props.tip | ||
}, this.props.text); | ||
@@ -51,2 +48,11 @@ } | ||
exports.default = Badge; | ||
Object.defineProperty(Badge, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
type: "primary", | ||
size: "default" | ||
} | ||
}); | ||
Object.defineProperty(Badge, "propTypes", { | ||
@@ -58,6 +64,6 @@ configurable: true, | ||
/** Text for the Badge */ | ||
text: _propTypes.default.string.isRequired, | ||
text: _propTypes.default.node.isRequired, | ||
/** Type of Badge is based off of `<Button />` component styles */ | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive"]).isRequired, | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive", "common", "approval"]).isRequired, | ||
@@ -64,0 +70,0 @@ /** Size of Badge, based based on `<Button />` component styles */ |
@@ -48,2 +48,8 @@ "use strict"; | ||
}); | ||
Object.defineProperty(exports, "Textarea", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Textarea.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "bpfrpt_proptype_EnumIconNames", { | ||
@@ -70,4 +76,6 @@ enumerable: true, | ||
var _Textarea = _interopRequireDefault(require("./Textarea")); | ||
var _EnumIconNames = require("./EnumIconNames"); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
@@ -57,5 +57,3 @@ "use strict"; | ||
value: function value() { | ||
return (0, _classnames.default)("Badge", "_".concat(_this.props.type), "_".concat(_this.props.size), { | ||
ss_tip: _this.props.tip | ||
}); | ||
return (0, _classnames.default)("Badge", "Badge--".concat(_this.props.type), "Badge--".concat(_this.props.size)); | ||
} | ||
@@ -70,4 +68,3 @@ }), _temp)); | ||
className: this.getClassNames(), | ||
"data-tip": this.props.tip, | ||
"data-sketch-symbol": "Badge/".concat(this.props.type) | ||
"data-tip": this.props.tip | ||
}, this.props.text); | ||
@@ -81,2 +78,11 @@ } | ||
exports.default = Badge; | ||
Object.defineProperty(Badge, "defaultProps", { | ||
configurable: true, | ||
enumerable: true, | ||
writable: true, | ||
value: { | ||
type: "primary", | ||
size: "default" | ||
} | ||
}); | ||
Object.defineProperty(Badge, "propTypes", { | ||
@@ -88,6 +94,6 @@ configurable: true, | ||
/** Text for the Badge */ | ||
text: _propTypes.default.string.isRequired, | ||
text: _propTypes.default.node.isRequired, | ||
/** Type of Badge is based off of `<Button />` component styles */ | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive"]).isRequired, | ||
type: _propTypes.default.oneOf(["primary", "secondary", "passive", "common", "approval"]).isRequired, | ||
@@ -94,0 +100,0 @@ /** Size of Badge, based based on `<Button />` component styles */ |
@@ -48,2 +48,8 @@ "use strict"; | ||
}); | ||
Object.defineProperty(exports, "Textarea", { | ||
enumerable: true, | ||
get: function get() { | ||
return _Textarea.default; | ||
} | ||
}); | ||
Object.defineProperty(exports, "bpfrpt_proptype_EnumIconNames", { | ||
@@ -70,4 +76,6 @@ enumerable: true, | ||
var _Textarea = _interopRequireDefault(require("./Textarea")); | ||
var _EnumIconNames = require("./EnumIconNames"); | ||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } |
{ | ||
"name": "@sproutsocial/racine", | ||
"version": "0.1.4", | ||
"version": "0.1.5", | ||
"license": "ISC", | ||
@@ -87,3 +87,3 @@ "files": [ | ||
"eslint-plugin-react": "^7.1.0", | ||
"flow-bin": "^0.66.0", | ||
"flow-bin": "^0.73.0", | ||
"fs-extra": "^5.0.0", | ||
@@ -121,3 +121,6 @@ "glob": "^7.1.2", | ||
"jest": { | ||
"setupTestFrameworkScriptFile": "<rootDir>src/setupTests.js" | ||
"setupTestFrameworkScriptFile": "<rootDir>/src/setupTests.js", | ||
"testPathIgnorePatterns": [ | ||
"<rootDir>/docs/src/.components" | ||
] | ||
}, | ||
@@ -124,0 +127,0 @@ "resolutions": { |
@@ -1,2 +0,2 @@ | ||
import React from "react"; | ||
import outdent from "outdent"; | ||
@@ -14,3 +14,3 @@ export default [ | ||
props: { | ||
text: "I am a passive informational Alert!", | ||
text: "I am a passive, informational Alert!", | ||
type: "info" | ||
@@ -28,70 +28,65 @@ } | ||
title: "Warning", | ||
props: { | ||
text: ( | ||
<div> | ||
I am a warning Alert! Quick,{" "} | ||
<a href="" className="Link"> | ||
click this link that does nothing | ||
</a>. | ||
</div> | ||
), | ||
type: "warning" | ||
} | ||
value: outdent` | ||
<Alert | ||
type='warning' | ||
text={ | ||
<div> | ||
I am a warning Alert! Quick, <a href="" className="Link">click this link that does nothing.</a>. | ||
</div> | ||
} | ||
/> | ||
` | ||
}, | ||
{ | ||
title: "Success w/ Link", | ||
props: { | ||
text: ( | ||
<div> | ||
I am a happy Alert! Quick,{" "} | ||
<a href="" className="Link"> | ||
click this link that does nothing | ||
</a>. | ||
</div> | ||
), | ||
type: "success" | ||
} | ||
value: outdent` | ||
<Alert | ||
type='success' | ||
text={ | ||
<div> | ||
I am a happy Alert! Quick, <a href="" className="Link">click this link that does nothing.</a>. | ||
</div> | ||
} | ||
/> | ||
` | ||
}, | ||
{ | ||
title: "Info w/ Link", | ||
props: { | ||
text: ( | ||
<div> | ||
I am a passive informational Alert! Quick,{" "} | ||
<a href="" className="Link"> | ||
click this link that does nothing | ||
</a>. | ||
</div> | ||
), | ||
type: "info" | ||
} | ||
value: outdent` | ||
<Alert | ||
type='info' | ||
text={ | ||
<div> | ||
I am a passive informational Alert. <a href="" className="Link">Click this link that does nothing.</a>. | ||
</div> | ||
} | ||
/> | ||
` | ||
}, | ||
{ | ||
title: "Danger w/ Link", | ||
props: { | ||
text: ( | ||
<div> | ||
I am an angry Alert! Quick,{" "} | ||
<a href="" className="Link"> | ||
click this link that does nothing | ||
</a>. | ||
</div> | ||
), | ||
type: "danger" | ||
} | ||
value: outdent` | ||
<Alert | ||
type='danger' | ||
text={ | ||
<div> | ||
I am an angry Alert! Quick, <a href="" className="Link">click this link that does nothing.</a>. | ||
</div> | ||
} | ||
/> | ||
` | ||
}, | ||
{ | ||
title: "Warning w/ Link", | ||
props: { | ||
text: ( | ||
<div> | ||
I am a warning Alert! Quick,{" "} | ||
<a href="" className="Link"> | ||
click this link that does nothing | ||
</a>. | ||
</div> | ||
), | ||
type: "warning" | ||
} | ||
value: outdent` | ||
<Alert | ||
type='warning' | ||
text={ | ||
<div> | ||
I am a warning Alert! Quick, <a href="" className="Link">click this link that does nothing.</a>. | ||
</div> | ||
} | ||
/> | ||
` | ||
} | ||
]; |
@@ -7,5 +7,5 @@ // @flow | ||
/** Text for the Badge */ | ||
text: string, | ||
text: React.Node, | ||
/** Type of Badge is based off of `<Button />` component styles */ | ||
type: "primary" | "secondary" | "passive", | ||
type: "primary" | "secondary" | "passive" | "common" | "approval", | ||
/** Size of Badge, based based on `<Button />` component styles */ | ||
@@ -23,6 +23,13 @@ size: "small" | "default", | ||
export default class Badge extends React.Component<Props> { | ||
static defaultProps = { | ||
type: "primary", | ||
size: "default" | ||
}; | ||
getClassNames = () => { | ||
return classnames("Badge", `_${this.props.type}`, `_${this.props.size}`, { | ||
ss_tip: this.props.tip | ||
}); | ||
return classnames( | ||
"Badge", | ||
`Badge--${this.props.type}`, | ||
`Badge--${this.props.size}` | ||
); | ||
}; | ||
@@ -32,7 +39,3 @@ | ||
return ( | ||
<span | ||
className={this.getClassNames()} | ||
data-tip={this.props.tip} | ||
data-sketch-symbol={`Badge/${this.props.type}`} | ||
> | ||
<span className={this.getClassNames()} data-tip={this.props.tip}> | ||
{this.props.text} | ||
@@ -39,0 +42,0 @@ </span> |
@@ -22,3 +22,24 @@ export default [ | ||
} | ||
}, | ||
{ | ||
title: "Common", | ||
props: { | ||
text: "I am a common Badge.", | ||
type: "common" | ||
} | ||
}, | ||
{ | ||
title: "Approval", | ||
props: { | ||
text: "I am an approval Badge.", | ||
type: "approval" | ||
} | ||
}, | ||
{ | ||
title: "Small", | ||
props: { | ||
text: "Small Badge", | ||
size: "small" | ||
} | ||
} | ||
]; |
@@ -10,1 +10,2 @@ // @flow | ||
export { default as Radio } from "./Radio"; | ||
export { default as Textarea } from "./Textarea"; |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
414550
81
6106