RELEASE 🚒 : 1.0.2
Ability of specifying the "filename" of the downloaded CSV file .
```
<CSVLink filename={"persons.csv"} data={data}>Click here</CSVLink>
```
This commit is contained in:
parent
c5053cf334
commit
d4544e117e
9 changed files with 4259 additions and 27 deletions
|
|
@ -126,12 +126,16 @@ It renders a hyperlink , and clicking on it will trigger the download action of
|
||||||
|
|
||||||
It does not accept only `data` and `headers` props , but also , it rendered all props of `HTMLAnchor` tag. (className, target,....)
|
It does not accept only `data` and `headers` props , but also , it rendered all props of `HTMLAnchor` tag. (className, target,....)
|
||||||
|
|
||||||
|
### - **filename** Props:
|
||||||
|
`filename` is another props restricted to `CSVLink`. It specifies the filename of the downloaded CSV .
|
||||||
|
|
||||||
**example**
|
**example**
|
||||||
|
|
||||||
```js
|
```js
|
||||||
import {CSVLink} from 'react-csv';
|
import {CSVLink} from 'react-csv';
|
||||||
|
|
||||||
<CSVLink data={data}
|
<CSVLink data={data}
|
||||||
|
filename={"my-file.csv"}
|
||||||
className="btn btn-primary"
|
className="btn btn-primary"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
Download me
|
Download me
|
||||||
|
|
|
||||||
4217
cdn/react-csv-1.0.2.js
Normal file
4217
cdn/react-csv-1.0.2.js
Normal file
File diff suppressed because it is too large
Load diff
3
cdn/react-csv-1.0.2.min.js
vendored
Normal file
3
cdn/react-csv-1.0.2.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
36
cdn/react-csv-latest.js
vendored
36
cdn/react-csv-latest.js
vendored
|
|
@ -12,6 +12,8 @@ Object.defineProperty(exports, "__esModule", {
|
||||||
|
|
||||||
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
var _class, _temp;
|
||||||
|
|
||||||
var _react = require('react');
|
var _react = require('react');
|
||||||
|
|
||||||
var _react2 = _interopRequireDefault(_react);
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
@ -31,8 +33,7 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
|
||||||
var defaultProps = {
|
var defaultProps = {
|
||||||
target: '_blank'
|
target: '_blank'
|
||||||
};
|
};
|
||||||
|
var CSVDownload = (_temp = _class = function (_React$Component) {
|
||||||
var CSVDownload = function (_React$Component) {
|
|
||||||
_inherits(CSVDownload, _React$Component);
|
_inherits(CSVDownload, _React$Component);
|
||||||
|
|
||||||
function CSVDownload(props) {
|
function CSVDownload(props) {
|
||||||
|
|
@ -75,11 +76,7 @@ var CSVDownload = function (_React$Component) {
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
return CSVDownload;
|
return CSVDownload;
|
||||||
}(_react2.default.Component);
|
}(_react2.default.Component), _class.defaultProps = Object.assign(_metaProps.defaultProps, defaultProps), _class.propTypes = _metaProps.propTypes, _temp);
|
||||||
|
|
||||||
CSVDownload.defaultProps = Object.assign(_metaProps.defaultProps, defaultProps);
|
|
||||||
CSVDownload.PropTypes = _metaProps.PropTypes;
|
|
||||||
|
|
||||||
exports.default = CSVDownload;
|
exports.default = CSVDownload;
|
||||||
},{"../core":4,"../metaProps":6,"react":37}],3:[function(require,module,exports){
|
},{"../core":4,"../metaProps":6,"react":37}],3:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
@ -92,6 +89,8 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
||||||
|
|
||||||
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
||||||
|
|
||||||
|
var _class, _temp;
|
||||||
|
|
||||||
var _react = require('react');
|
var _react = require('react');
|
||||||
|
|
||||||
var _react2 = _interopRequireDefault(_react);
|
var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
@ -110,7 +109,7 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
|
||||||
|
|
||||||
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } 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 _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } 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; }
|
||||||
|
|
||||||
var CSVLink = function (_React$Component) {
|
var CSVLink = (_temp = _class = function (_React$Component) {
|
||||||
_inherits(CSVLink, _React$Component);
|
_inherits(CSVLink, _React$Component);
|
||||||
|
|
||||||
function CSVLink(props) {
|
function CSVLink(props) {
|
||||||
|
|
@ -134,12 +133,13 @@ var CSVLink = function (_React$Component) {
|
||||||
data = _props.data,
|
data = _props.data,
|
||||||
headers = _props.headers,
|
headers = _props.headers,
|
||||||
separator = _props.separator,
|
separator = _props.separator,
|
||||||
|
filename = _props.filename,
|
||||||
children = _props.children,
|
children = _props.children,
|
||||||
rest = _objectWithoutProperties(_props, ['data', 'headers', 'separator', 'children']);
|
rest = _objectWithoutProperties(_props, ['data', 'headers', 'separator', 'filename', 'children']);
|
||||||
|
|
||||||
return _react2.default.createElement(
|
return _react2.default.createElement(
|
||||||
'a',
|
'a',
|
||||||
_extends({}, rest, {
|
_extends({ download: filename }, rest, {
|
||||||
href: this.buildURI(data, headers, separator) }),
|
href: this.buildURI(data, headers, separator) }),
|
||||||
children
|
children
|
||||||
);
|
);
|
||||||
|
|
@ -147,11 +147,7 @@ var CSVLink = function (_React$Component) {
|
||||||
}]);
|
}]);
|
||||||
|
|
||||||
return CSVLink;
|
return CSVLink;
|
||||||
}(_react2.default.Component);
|
}(_react2.default.Component), _class.defaultProps = _metaProps.defaultProps, _class.propTypes = _metaProps.propTypes, _temp);
|
||||||
|
|
||||||
CSVLink.defaultProps = _metaProps.defaultProps;
|
|
||||||
CSVLink.PropTypes = _metaProps.PropTypes;
|
|
||||||
|
|
||||||
exports.default = CSVLink;
|
exports.default = CSVLink;
|
||||||
},{"../core":4,"../metaProps":6,"react":37}],4:[function(require,module,exports){
|
},{"../core":4,"../metaProps":6,"react":37}],4:[function(require,module,exports){
|
||||||
'use strict';
|
'use strict';
|
||||||
|
|
@ -248,7 +244,7 @@ var CSVLink = exports.CSVLink = _Link2.default;
|
||||||
Object.defineProperty(exports, "__esModule", {
|
Object.defineProperty(exports, "__esModule", {
|
||||||
value: true
|
value: true
|
||||||
});
|
});
|
||||||
exports.PropsNotForwarded = exports.defaultProps = exports.PropTypes = undefined;
|
exports.PropsNotForwarded = exports.defaultProps = exports.propTypes = undefined;
|
||||||
|
|
||||||
var _react = require('react');
|
var _react = require('react');
|
||||||
|
|
||||||
|
|
@ -256,15 +252,17 @@ var _react2 = _interopRequireDefault(_react);
|
||||||
|
|
||||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
||||||
|
|
||||||
var PropTypes = exports.PropTypes = {
|
var propTypes = exports.propTypes = {
|
||||||
data: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.array]).isRequired,
|
data: _react2.default.PropTypes.oneOfType([_react2.default.PropTypes.string, _react2.default.PropTypes.array]).isRequired,
|
||||||
headers: _react2.default.PropTypes.array,
|
headers: _react2.default.PropTypes.array,
|
||||||
target: _react2.default.PropTypes.string,
|
target: _react2.default.PropTypes.string,
|
||||||
separator: _react2.default.PropTypes.string
|
separator: _react2.default.PropTypes.string,
|
||||||
|
filename: _react2.default.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
var defaultProps = exports.defaultProps = {
|
var defaultProps = exports.defaultProps = {
|
||||||
separator: ','
|
separator: ',',
|
||||||
|
filename: 'generatedBy_react-csv.csv'
|
||||||
};
|
};
|
||||||
|
|
||||||
var PropsNotForwarded = exports.PropsNotForwarded = ['data', 'headers'];
|
var PropsNotForwarded = exports.PropsNotForwarded = ['data', 'headers'];
|
||||||
|
|
|
||||||
6
cdn/react-csv-latest.min.js
vendored
6
cdn/react-csv-latest.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "react-csv",
|
"name": "react-csv",
|
||||||
"version": "1.0.1",
|
"version": "1.0.2",
|
||||||
"description": "Build CSV files on the fly basing on Array/literal object of data ",
|
"description": "Build CSV files on the fly basing on Array/literal object of data ",
|
||||||
"main": "index.js",
|
"main": "index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
|
|
|
||||||
|
|
@ -19,9 +19,9 @@ class CSVLink extends React.Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
render(){
|
render(){
|
||||||
const {data, headers, separator, children , ...rest} = this.props;
|
const {data, headers, separator, filename, children , ...rest} = this.props;
|
||||||
return (
|
return (
|
||||||
<a {...rest}
|
<a download={filename} {...rest}
|
||||||
href={this.buildURI(data, headers, separator)}>
|
href={this.buildURI(data, headers, separator)}>
|
||||||
{children}
|
{children}
|
||||||
</a>
|
</a>
|
||||||
|
|
|
||||||
|
|
@ -8,11 +8,13 @@ export const propTypes = {
|
||||||
]).isRequired,
|
]).isRequired,
|
||||||
headers: React.PropTypes.array,
|
headers: React.PropTypes.array,
|
||||||
target: React.PropTypes.string,
|
target: React.PropTypes.string,
|
||||||
separator: React.PropTypes.string
|
separator: React.PropTypes.string,
|
||||||
|
filename: React.PropTypes.string
|
||||||
};
|
};
|
||||||
|
|
||||||
export const defaultProps = {
|
export const defaultProps = {
|
||||||
separator: ','
|
separator: ',',
|
||||||
|
filename: 'generatedBy_react-csv.csv'
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PropsNotForwarded = [
|
export const PropsNotForwarded = [
|
||||||
|
|
|
||||||
|
|
@ -45,11 +45,19 @@ describe('CSVLink', () => {
|
||||||
expect(wrapper.props().separator).toEqual(',');
|
expect(wrapper.props().separator).toEqual(',');
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it(`assigns a download filename`, () => {
|
||||||
|
const filename= "persons.csv";
|
||||||
|
const wrapper = mount( <CSVLink {...minProps} filename={filename} > here </CSVLink>);
|
||||||
|
expect(wrapper.find('a').get(0).getAttribute('download')).toEqual(filename);
|
||||||
|
});
|
||||||
|
|
||||||
it(`renders anchor tag`, () => {
|
it(`renders anchor tag`, () => {
|
||||||
const wrapper = shallow( <CSVLink {...minProps} > Click here </CSVLink>);
|
const wrapper = shallow( <CSVLink {...minProps} > Click here </CSVLink>);
|
||||||
expect(wrapper.find('a').length).toEqual(1);
|
expect(wrapper.find('a').length).toEqual(1);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
it(`calls "buildURI" method on mounting`, () => {
|
it(`calls "buildURI" method on mounting`, () => {
|
||||||
const dataURI = `data:text/csv;some,thing`
|
const dataURI = `data:text/csv;some,thing`
|
||||||
const buildURI = sinon.stub(CSVLink.prototype, 'buildURI').returns(dataURI);
|
const buildURI = sinon.stub(CSVLink.prototype, 'buildURI').returns(dataURI);
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue